<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>CATALOG TREE COMPONENT</title>
    <!-- [REQUIRED] JQUERY SCRIPT/CSS INTEGRATION -->
    <!-- INCLUDING COMPONENT-RELATED EXTERNAL SCRIPTS -->
    <link href="../../api/css/custom-theme/jquery-ui-1.9.2.custom.css" rel="stylesheet">
    <link href="../../api/js/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
    <script src="../../api/js/jquery-1.8.3.js"></script>
    <script src="../../api/js/jquery-ui-1.9.2.custom.js"></script>
    <script src="../../api/js/jquery.cookie.js" type="text/javascript"></script>
    <script src="../../api/js/jquery.dynatree.js" type="text/javascript"></script>
    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>

    <!-- [REQUIRED] SCRIPT FOR INTEGRATION WITH BOI -->
    <script type="text/javascript">

        //comment this line when done testing
        $(function(){initialize();});

        var BOI = parent.BOI; //REQUIRED
        var properties = { //REQUIRED
            width: "100px",
            height: "20px",
            text: "original"
        };

        window.onload = function() {
            //sample registeration for an event
            //register listener function for an event
            BOI.Events.addListener(BOI.Events.appchange, function(args) { //args[0] is the app id
             //   alert('Event Received by Component, with this data: ' + args[0]);
                BOI.BOILib.Util.log('Event Received by Component, with this data: ' + args[0],true);
                //refresh();
            });
        }

        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            $(document).on('change','#bi_comp_text', function(){
            });

            //example to set property values to dom elements
            refreshProperties();

            //load the tree
            load();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var refreshProperties = function refreshProperties(){ //REQUIRED function to be called by parent when a property change occurs
            $('#bi_comp_text').val(properties.text);
        };
    </script>

    <!-- COMPONENT STYLING -->
    <style type="text/css">
        body {font-family: sans-serif;}
    </style>

    <!-- COMPONENT SCRIPT -->
    <script type="text/javascript">
    function activateCatNode(key)
    {
        var tree = $(bi_cat_tree_id).dynatree("getTree");
        if(key)
        {
            tree.selectKey(key);
            tree.activateKey(key);

            // Get a DynaTreeNode object instance:
            var node = tree.getNodeByKey(key);
            activate(node);
        }
        else
        {
            //activate(tree.getRoot().childList[0]);
        }
    }

    var bi_cat_tree_id = "#bi_cat_tree";

    function loadCatTree(data, activateKey)
    {
        $(bi_cat_tree_id).dynatree({
            fx:{ height:"toggle", duration:200 },
            clickFolderMode:1, // 1:activate, 2:expand, 3:activate and expand
            minExpandLevel: 2,
            persist: false,
            selectMode: 1,
            children: data,
            onCreate: function (node, span)
            {
                //store needed info for context menu usage
                $(span).attr("key", node.data.key);
                $(span).attr("isFolder", node.data.isFolder ? 'true' : 'false');
                $(span).attr("type", node.data.type);
                $(span).attr("editable", node.data.editable);
                $(span).attr("nodeid", node.data.nodeID);

                $(span).attr('href','');
            },
            onActivate:function (node)
            {
                activate(node);
            },
            onPostInit:function ()
            {
                activateCatNode(activateKey);
            }
        });
    }

    function activate(node)
    {
        //tell BOI that we want to open a new report
        BOI.Events.raiseEvent(BOI.Events.repopen, [node.data.key, node.data.title]); //args[0] is report id sent as argument
    }

    //initialize
    function load()
    {
        //TODO: use BOI.app_id instead of hardcoded AC_DB, and set to USER MODE
        BOI.loadReportCatalog("AC_DB",'JSON', function(){
            loadCatTree(BOI.context.reportCatalogJSON);
        }, "USER");
    }
load();
    </script>

</head>
<body>
<div>
    <div id="bi_cat_tree"></div>
</div>
</body>
</html>